<template>
  <div>
    <div class="annularChart" id="shape"></div>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  export default {
    props: ['item'],
    data() {
      return {
        data:[],
      }
    },
    watch: {
      item: function(newVal) {
        if (newVal) {
          this.data = newVal;
          this.getShape()
        }
      }
    },
    methods: {
      getShape() {
        let than = this;
        let shapeCharts = echarts.init(document.getElementById(`shape`));
        shapeCharts.setOption({
          title: {
            left: 10,
            top: 20,
            text: 'IPC分类',
            textStyle: {
              color: "#1f2e4c",
              fontSize: "17",
              fontWeight: 400
            },
          },
          tooltip: {
            position: ['50%', '50%'],
            formatter: '{b0}: {c0}',
            // <br />{b1}: {c1}
          },
          color: ['#81D7BC', '#64DFB8', '#34c092', '#F2C470', '#F7B21A', '#3264BC', '#4080EF', '#7EAEEA', '#BAD2E8'],
          series: [{
            name: 'option',
            left: "center",
            bottom: 15,
            width: "95%",
            visibleMin: 300,
            roam: false, //禁止拖拽
            nodeClick: false, //禁止点击缩放
            type: 'treemap',
            tooltip: {},
            upperLabel: {
              normal: {
                // show: true
              }
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                }
              }
            },
            data: than.data,

            breadcrumb: {
              show: false,
            },
          }]
        })
      },
    },
    mounted() {
      if(this.data.length > 0){
        this.$nextTick(() => {
          this.getShape();
        })
      }
    },
  }
</script>

<style scoped>
  #shape {
    width: 100%;
    height: 395px;
    background-color: #fff;
  }
  @media (max-width:1668px) {
    #shape {
      width: 100% ;
      height: 395px;
      background-color: #fff;
    }
  }
  @media (max-width:1440px) {
    #shape {
      width: 100%;
      height: 395px;
      background-color: #fff;
    }

  }
  @media (max-width:1366px) {
    #shape {
      width: 340px;
      height: 395px;
      background-color: #fff;
    }
  }
  @media (max-width:1280px) {
  }
</style>
